<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="lazyload.css">
	<link rel="stylesheet" href="viewer.min.css">
	<style>
		.container img{width: 200px;margin:10px;}
	</style>
</head>
<body>
	<div class="container" id="container">
<!-- 		<img class="lazy" data-original="images/1.jpg" width="200" alt='loading...'>
<img class="lazy" data-original="images/2.jpg" width="200" alt='loading...'>
<img class="lazy" data-original="images/3.jpg" width="200" alt='loading...'>
<img class="lazy" data-original="images/4.jpg" width="200" alt='loading...'>
<img class="lazy" data-original="images/3.jpg" width="200" alt='loading...'>
<img class="lazy" data-original="images/2.jpg" width="200" alt='loading...'> -->
	</div>
</body>
<script src='http://libs.baidu.com/jquery/1.11.1/jquery.min.js'></script>
<script src="viewer.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
	for(var a = 0 ; a < 60 ; a ++){
		var img = "<img class='lazy' data-src='images/1-1.jpg' data-original='images/1.jpg' width='240' height='220' alt='loading...' />";
		$('.container').append(img);
	}
	$(function(){
        $("img.lazy").lazyload({
        });
        $('#container').viewer({
			url:"data-src"
		});
    })
</script>
</html>